<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" />
<meta name="copyright" content="">
<meta name="author" content="">
<title>私立学校排名</title>
<!-- <link rel="stylesheet" href="./static/css/style.css"> -->
<link rel="stylesheet" href="./static/css/element-ui.css">
<script src="./static/js/basic.js"></script>
<script src="./static/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="./static/js/swiper-4.5.3.min.js"></script>
<link rel="stylesheet" href="./swiper/swiper.min.css" />
<script src="./static/js/element-ui.js"></script>
<script src="./static/js/js.js"></script>
</head>

<body>
  <div id="app" class="sl-xxpm">
    <my-header :type="3">
      <template v-if="con">
        <div class="ny-banner" :style="'background-image: url(' + con.banner+')'" v-if="con.banner"></div>
        <div class="gj-how-main1 box">
          <div class="tit">《学校排名重要因素》</div>
          <div class="desc" v-html="con.desc"></div>
        </div>
        
        <div class="sl-pm-main2 box">
          <div class="tabs" v-if="pmTabs">
            <span v-for="(item, i) in pmTabs" :key="i" class="item" :class="{on : pmIdx === i}" @mouseenter="pmIdx = i">{{item.name}}</span>
          </div>
          <div class="con">
            <table class="table"> 
              <tr>
                <th class="w1">排名</th>
                <th class="w2">学校名称</th>
                <th class="w3">所在地区</th>
                <th class="w4">学费（口碑排名）</th>
                <th class="w5">招生年级</th>
                <th class="w6">录取方式</th>
              </tr>
            </table>
            <div class="table-box scroll-y" v-if="pmTabs">
              <table class="table">
                <tr v-for="(item, i) in pmTabs[pmIdx].list" :key="i" :class="[i%2 === 0 ? 'tr1':'tr2', i < 3 ? 'on' :'']">
                  <td class="w1">{{i+1}}</td>
                  <td class="w2">{{item.name}}</td>
                  <td class="w3">{{item.address}}</td>
                  <td class="w4">{{item.fee}}</td>
                  <td class="w5">{{item.nj}}</td>
                  <td class="w6">{{item.way}}</td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        
        <div class="gj-yygz-main3">
          <div class="box clearfix">
            <div class="gj-how-tit flex-bect">
              <span>私立学校推荐</span>
              <div class="flex-rict tabs" v-if="tabs">
                <span v-for="(item, i) in tabs" :key="i" class="tab-item" :class="{on:tabId == item.id}" @click="getSchool(item.id)">{{item.name}}</span>
              </div>
            </div>
            <div class="list" v-if="school">
              <a v-for="(item, i) in school" :key="i" :href="router.gjDetail+'?id='+item.id" class="item flex-bect ease">
                <div class="imgW"><img :src="item.src" alt="" class="img"></div>
                <div class="div flex1">
                  <div class="title row1">{{item.name}}<div class="lab">招生年级：{{item.nj}}</div></div>
                  <div class="p">课程体系：<b>{{item.kc}}</b></div>
                  <div class="p">学&nbsp;&nbsp;&nbsp;&nbsp;费：<span class="money">{{item.fee}}</span></div>
                  <div class="p row1"> 学校介绍：{{item.desc}}</div>
                </div>
                <div class="line"></div>
                <div class="btn-box">
                  <span class="btn">进入学校</span>
                  <div class="address">{{item.address}}</div>
                </div>
              </a>
            </div>
            <div class="flex-ct page"><el-pagination background layout="total, prev, pager, next" :total="total" :page-size="4" @current-change="handleCurrentChange"></el-pagination></div>
          </div>
        </div>
        
        <gj-hownews v-if="con && con.list" :con="con.list" title="私立学校相关新闻动态，择校指南"></gj-hownews>
        
      </template>
    </my-header>
  </div>
  <style>
    
  </style>
  <script type="text/babel">
    let time = new Date().getTime();
    let router = getPath()
    new Vue({
      el: '#app',
      components: {
        'my-header': httpVueLoader('./components/header.vue?time='+time),
        'gj-how': httpVueLoader('./components/gj_how.vue?time='+time),
        'gj-hownews': httpVueLoader('./components/gj_hownews.vue?time='+time),
        
      },
      data:{
        router:router,
        pmTabs: null,
        pmIdx:0,
        con:null,
        wlist:null,
        total:20,
        pup_show:false,
        pup_con:null,
        school:null,
        tabs:null,
        tabId:1
      },
      mounted() {
        this.getCon();
      },
      
      methods: {
        // 获取对应的高中学校
        getSchool(id){
          this.tabId = id;
          console.log("通过接口获取对应的学校")
        },
        handleCurrentChange(e){
          console.log('翻页，',e)
        },
        
        
        
        
        
        getCon(){
          const pmlist1 = [
            {id:1, address:"北京昌平区", name:"北京德闳学校",fee:"5.00万", nj:"1", way:"满足就读政策+入学面试"},
            {id:2, address:"北京昌平区", name:"领科教育北京校区 ",fee:"5.56万", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:3, address:"北京昌平区", name:"北京外国语大学国际课程中心",fee:"19.8万/年", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:4, address:"北京昌平区", name:"北京爱迪国际学校 ",fee:"12.5~24.8万/年", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:5, address:"北京昌平区", name:"北京德闳学校",fee:"5.00万", nj:"1", way:"满足就读政策+入学面试"},
          ];
          const pmlist2 = [
            {id:8, address:"北京昌平区", name:"北京外国语大学国际课程中心",fee:"19.8万/年", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:9, address:"北京昌平区", name:"北京爱迪国际学校 ",fee:"12.5~24.8万/年", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:10, address:"北京昌平区", name:"北京德闳学校",fee:"5.00万", nj:"1", way:"满足就读政策+入学面试"},
            {id:6, address:"北京昌平区", name:"北京德闳学校",fee:"5.00万", nj:"1", way:"满足就读政策+入学面试"},
            {id:7, address:"北京昌平区", name:"领科教育北京校区 ",fee:"5.56万", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
          ];
          const pmlist3 = [
            {id:11, address:"北京昌平区", name:"北京德闳学校",fee:"5.00万", nj:"1", way:"满足就读政策+入学面试"},
            {id:12, address:"北京昌平区", name:"领科教育北京校区 ",fee:"5.56万", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:13, address:"北京昌平区", name:"北京外国语大学国际课程中心",fee:"19.8万/年", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:14, address:"北京昌平区", name:"北京爱迪国际学校 ",fee:"12.5~24.8万/年", nj:"1,2,3,4,5,6", way:"满足就读政策+入学面试"},
            {id:15, address:"北京昌平区", name:"北京德闳学校",fee:"5.00万", nj:"1", way:"满足就读政策+入学面试"},
          ]
          this.pmTabs = [
            {id:1, name:"私立小学排名", list:[...pmlist1,...pmlist2,...pmlist3]},
            {id:2, name:"私立初中排名", list:[...pmlist2,...pmlist1,...pmlist3]},
            {id:3, name:"私立高中排名", list:[...pmlist3,...pmlist2,...pmlist1]}
          ]
          
          this.tabs = [{id:1, name:"1~3万元/年学校"}, {id:2, name:"3~5万/年学校"}, {id:3, name:"5万以上学校"}]
          this.school = [
            {id:1, src:"./static/image/nav/gj-logo1.png", kc:"双语课程", fee:"1.05万/年", desc:"北京市朝阳区博雅学校创办于2010年，坐落于北京市朝阳区金盏中心区域，距北京首都国际机场...", address:"天津市武清区", nj:"十年级,十一年级,十二年级", name:"北京博雅学校初中部"},
            {id:2, src:"./static/image/nav/gj-logo1.png", kc:"双语课程", fee:"1.05万/年", desc:"北京市朝阳区博雅学校创办于2010年，坐落于北京市朝阳区金盏中心区域，距北京首都国际机场...", address:"天津市武清区", nj:"十年级,十一年级,十二年级", name:"北京博雅学校初中部"},
            {id:3, src:"./static/image/nav/gj-logo1.png", kc:"双语课程", fee:"1.05万/年", desc:"北京市朝阳区博雅学校创办于2010年，坐落于北京市朝阳区金盏中心区域，距北京首都国际机场...", address:"天津市武清区", nj:"十年级,十一年级,十二年级", name:"北京博雅学校初中部"},
            {id:4, src:"./static/image/nav/gj-logo1.png", kc:"双语课程", fee:"1.05万/年", desc:"北京市朝阳区博雅学校创办于2010年，坐落于北京市朝阳区金盏中心区域，距北京首都国际机场...", address:"天津市武清区", nj:"十年级,十一年级,十二年级", name:"北京博雅学校初中部"},
          ]
          this.con = {
            banner: './static/image/sl_10_xxpm/banner.png',
            desc:"私立学校排名，是很多家长在择校时都会考虑的重要因素之一。私立学校的数量众多，想要选择出一所好的私立学校，实在是需要考虑的情况有很多，比如：私立学校社会知名度、所在地区、课程设置、上课方式、录取方式，还有软硬件设施、学费高低等等。<br>为了帮助大家更好的选择出优质的私立学校，这里，综合以上情况，为大家整理了京津冀等地区的私立学校排名榜单，供大家择校时参考使用！",
            
            list:{
              news:[
                {id:1, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:2, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:3, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:4, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:5, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:6, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:7, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
                {id:8, time:"04-14", name:"2023年天津中小学一贯制可寄宿国际学校推荐(附学费)"},
              ],
              labs:[
                {id:1, text:'<span class="sp">孩子成绩不好</span>，北京哪所国际学校比较好考?'},
                {id:2, text:'"就读国际学校后还能<span class="sp">转回普通学校</span>吗?'},
                {id:4, text:'听说读国际学校要<span class="sp">年收入过百万</span>，真的假的?'},
                {id:5, text:'孩子读国际学校还可以<span class="sp">参加高考</span>吗?'},
                {id:6, text:'考<span class="sp">美国藤校、英国牛津、剑桥</span>选哪所国际学校好?'},
                {id:7, text:'读国际学校的孩子<span class="sp">出路</span>好吗?'},
                {id:3, text:'国际学校每年发布的大学<span class="sp">录取榜单</span>是真的还是假的?'},
              ]
            }
            
          }
        }
      }
    })
  </script>
  <link rel="stylesheet" href="./static/animation/animate.min.css" />
  <script type="text/javascript" src="./static/animation/wow.min.js"></script>
  <script>
      var wow = new WOW({
          boxClass: 'wow',
          animateClass: 'animated',
          offset: 0,
          mobile: false,
          live: true
      });
      wow.init();
  </script>
  
</body>
</html>